<template>
  <div>
    <h2 style="text-align: center">登录</h2>

    <el-form :model="user" status-icon  ref="user" label-width="100px" class="demo-ruleForm" >
      <el-form-item label="用户名" >
        <el-input type="text" v-model="user.username" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="pass">
        <el-input type="password" v-model="user.password" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="login">提交</el-button>
        <el-button @click="resetForm('user')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "LoginView",
  data() {
    return {
      user: {
        password: '111111',
        // checkPass: '',
        username: 'admin'
      },
    }
  },

  methods: {
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    login(){
      axios
          .post("http://localhost:8082/user/login",this.user)
          // .post("http://localhost:8082/user/login",{})
          .then(res => {
            if (res.data.coding == 20000){
              this.$message.success("登录成功")
              // 先更新状态
              this.$store.commit("saveUsername",this.user.username)
              //   再跳转主页
              this.$router.push("/indexadmin")
            }

          })
          .catch(error => {
            console.log(error)
            this.$message.error("登录失败")
          })
    }
  }
}

</script>
<style scoped>

  .demo-ruleForm{
    width: 400px;
    margin-left: 50%;
    //justify-content: center;
    transform: translateX(-60%);

  }
</style>
